<template id="PayCompleted">
  <div class="PayCompleted">
    <div class="pc">
      <div class="topPath">
        <div class="w1200">
          <go-to-back :path="`/mail/productItem`" />
          <div class="payProduct">
            <img :src="pcPayIcon" class="pcPayIcon" />
            <p>{{ productData.goods_name }}藏品购买成功！</p>
            <div class="showBtn" @click="showProduct('pc')">查看藏品</div>
          </div>
        </div>
      </div>

      <div class="centerPath">
        <div class="centerPath-ewm">
          <img
            v-for="(item, index) in ewmUrls"
            :key="index"
            :src="item.image"
          />
        </div>
        <div class="centerPath-bottom">即刻扫码关注，与藏友交流</div>
      </div>

      <div class="bottomPath">
        <div class="recommendProduct">
          <p class="ContentTitle">推荐商品</p>
          <div class="productGroup">
            <div
              class="productItem"
              v-for="(item, index) in relevantList"
              :key="index"
              @click="goToProduct(item)"
            >
              <img :src="item.image" />
              <div class="pcDesc">
                <p class="pcProductTitle">{{ item.goods_name }}</p>
                <div class="pcBuy">
                  <p class="productPrice"><span>¥</span>{{ item.price }}</p>
                  <p class="productNumber">商品剩余{{ item.goods_stock }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="phone">
      <div class="phoneTop">
        <img :src="phonePayIcon" class="payIcon" />
        <p>{{ productData.goods_name }}藏品购买成功！</p>
        <div class="buttonList">
          <div class="unPaidButton" @click="showProduct('phone')">查看藏品</div>
          <div class="paidButton" @click="goToHome()">返回首页</div>
        </div>
      </div>
      <div class="centerPath">
        <div class="centerPath-ewm">
          <img
            v-for="(item, index) in ewmUrls"
            :key="index"
            :src="item.image"
          />
        </div>
        <div class="centerPath-bottom">即刻扫码关注，与藏友交流</div>
      </div>
      <div class="phoneBottom">
        <p class="phoneBottomTitle">推荐藏品</p>
        <div class="relevantBox">
          <div
            class="phoneItem"
            v-for="(item, location) in relevantList"
            :key="location"
            @click="goToProduct(item)"
          >
            <div class="productImages">
              <img :src="item.image" />
            </div>
            <div class="productDesc">
              <p class="productTitle">{{ item.goods_name }}</p>
              <div class="buy">
                <p class="price">¥{{ item.price }}</p>
                <div class="phoneProductNumber">
                  商品剩余{{ item.goods_stock }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <SyntheticDialog
      :isSyntheticDialog="isSyntheticDialog"
      :productData="syntheticproductData"
      @handleCloseSyntheticDialog="closeSyntheticDialog"
    />
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import GoToBack from "./components/GoToBack.vue";
import { Pagination } from "@/components";
import SyntheticDialog from "./components/SyntheticDialog.vue";

import {
  getGoodsInfoApi,
  getSimilarGoodsListApi,
  paySuccessCodeApi,
  getPieceSuccessApi,
} from "@/api";
import { iscode } from "@/utils";
export default {
  name: "PayCompleted",
  components: { GoToBack, Pagination, SyntheticDialog },
  // 定义属性
  data() {
    return {
      productData: {},
      relevantList: [],
      page: {
        // 默认当前分页
        defaultPagination: 1,
        // 总页数
        pageCount: 5,
        totalPages: 100,
      },
      phonePayIcon: require("@/assets/images/mobile/payCompleted.png"),
      pcPayIcon: require("@/assets/images/product/paySuccess.png"),
      baseURL: "",
      ewmUrls: [],
      isSyntheticDialog: false,
      syntheticproductData: {},
      isLoading: true,
      loadingNum: 0,
      loadingTimer: null,
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 获取二维码
    async paySuccessCode() {
      let res = await paySuccessCodeApi();
      if (iscode(res)) {
        this.ewmUrls = res.result.list;
        this.ewmUrls.map(item => {
          this.$set(item, "image", res.result.show_url + item.icon);
        });
      }
    },
    async getGoodsInfo() {
      let result = await getGoodsInfoApi({ id: this.$route.query.id });
      if (iscode(result)) {
        this.productData = result.result.goods_info;
        this.getSimilarGoodsList();
        this.$set(
          this.productData,
          "image",
          result.result.show_url + result.result.goods_info.images[0]
        );
      }
    },
    async getSimilarGoodsList() {
      let result = await getSimilarGoodsListApi({
        goods_cate_id: this.productData.goods_cate_id,
        goods_album_id: this.productData.goods_album_id,
      });
      if (iscode(result)) {
        this.relevantList = result.result.list;
        this.relevantList.map((item, index) => {
          this.$set(item, "image", result.result.show_url + item.images[0]);
        });
      }
    },
    async getPieceSuccess() {
      const res = await getPieceSuccessApi({
        order_id: this.$route.query.order_id,
      });
      if (iscode(res)) {
        if (res.result.entity) {
          // this.isLoading = false;
          // this.loadingNum = 0;
          let { entity, show_url } = res.result;
          this.$set(this.syntheticproductData, "name", entity.name);
          this.$set(this.syntheticproductData, "icon", show_url + entity.icon);
          this.isSyntheticDialog = true
        } else {
          this.isSyntheticDialog = false
          // if (this.loadingNum >= 20) {
          //   this.loadingNum = 0;
          //   this.closeSyntheticDialog();
          //   return;
          // }
          // this.isLoading = true;
          // this.loadingTimer = setTimeout(() => {
          //   this.loadingNum++;
          //   this.getPieceSuccess();
          // }, 1000);
        }
      }
    },
    showProduct(type) {
      if (type == "pc") {
        // this.$router.push({
        //   path: "/personalCollectionPage",
        //   query: {
        //     id: this.productData.id,
        //     order_id: this.$route.query.order_id,
        //   },
        // });
        window.location.href =
          this.baseURL +
          "#/personalCollectionPage?id=" +
          this.productData.id +
          "&order_id=" +
          this.$route.query.order_id +
          "&bought=1";
      } else {
        // this.$router.push({
        //   path: "/mail/showCollection",
        //   query: {
        //     id: this.productData.id,
        //     order_id: this.$route.query.order_id,
        //   },
        // });
        window.location.href =
          this.baseURL +
          "#/mail/showCollection?id=" +
          this.productData.id +
          "&order_id=" +
          this.$route.query.order_id +
          "&bought=1";
      }
    },
    changePage(payload) {
      console.log(payload, "page");
    },
    goToProduct(item) {
      this.$router.push({
        path: "/mail/productDetail",
        query: {
          id: item.id,
        },
      });
    },
    goToHome() {
      window.location.href = this.baseURL;
      // this.$router.push("/");
    },
    getBaseUrl() {
      let url = window.location.href;
      if (url.indexOf("?code=") !== -1) {
        this.baseURL = window.location.href.split("?code=")[0];
      } else if (url.indexOf("?merchantId=") !== -1) {
        this.baseURL = window.location.href.split("?merchantId=")[0];
      } else {
        this.baseURL = window.location.href.split("#")[0];
      }
    },
    closeSyntheticDialog() {
      if (this.loadingTimer) {
        clearTimeout(this.loadingTimer);
        this.loadingNum = 0;
      }
      this.isSyntheticDialog = false;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getGoodsInfo();
    this.getBaseUrl();
    this.paySuccessCode();
    this.getPieceSuccess();
    // setTimeout(() => {
    //   this.isSyntheticDialog = true;
    // }, 500);
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.PayCompleted {
  min-height: 1080px;
  background: #171818;
  padding-bottom: 33px;
  margin-top: 7px;
  p {
    margin: 0;
  }

  .pc {
    .topPath {
      padding-top: 29px;

      .w1200 {
        width: 1200px;
        margin: 0 auto;

        .payProduct {
          margin-top: 20px;
          width: 100%;
          min-height: 244px;
          background: #2b2c2d;
          display: flex;
          flex-direction: column;
          align-items: center;

          .pcPayIcon {
            width: 60px;
            height: 60px;
            margin-top: 40px;
          }

          p {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            margin-top: 20px;
          }

          .showBtn {
            padding: 6px 15px;
            border-radius: 2px;
            border: 1px solid #ff8686;
            backdrop-filter: blur(3px);
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff8686;
            margin-top: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-bottom: 40px;
          }
        }
      }
    }

    .centerPath {
      margin-top: 30px;

      .centerPath-ewm {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        font-size: 0;

        img {
          width: 150px;
          height: 150px;
          margin-left: 50px;
        }
        img:first-child {
          margin: 0;
        }
      }

      .centerPath-bottom {
        margin-top: 30px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
      }
    }

    .bottomPath {
      margin-top: 30px;

      .recommendProduct {
        width: 1200px;
        margin: 0 auto;

        .ContentTitle {
          font-size: 18px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
        }

        .productGroup {
          margin-top: 20px;
          display: flex;
          // justify-content: space-between;
          justify-content: flex-start;

          .productItem {
            width: 166px;
            margin-right: 41px;

            img {
              width: 166px;
              height: 166px;
              cursor: pointer;
            }

            .pcDesc {
              background: #2b2c2d;
              padding: 8px 10px 14px 8px;

              .pcProductTitle {
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                min-height: 36px;
              }

              .pcBuy {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 12px;

                .productPrice {
                  font-size: 14px;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #00ffb0;

                  span {
                    font-size: 12px;
                    margin-right: 3px;
                  }
                }

                .productNumber {
                  font-size: 10px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #8e8f8f;
                }
              }
            }
          }
          .productItem:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }

  .phone {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .PayCompleted {
    padding-bottom: 50px;
    margin: 0;
    background: #1e2020;

    .pc {
      display: none;
    }

    .phone {
      display: block;

      .phoneTop {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .payIcon {
          width: 120px;
          height: 120px;
          margin-top: 66px;
        }

        p {
          font-size: 36px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 46px;
          margin-top: 40px;
          padding: 0 20px;
          text-align: center;
        }

        .buttonList {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 100px;

          .unPaidButton,
          .paidButton {
            border-radius: 4px;
            border: 1px solid #ff8686;
            backdrop-filter: blur(3px);
            width: 144px;
            height: 52px;
            font-size: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ff8686;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .paidButton {
            border: 1px solid #00ffb0;
            color: #00ffb0;
            margin-left: 40px;
          }
        }
      }

      .centerPath {
        margin-top: 60px;

        .centerPath-ewm {
          display: flex;
          justify-content: center;
          margin-top: 30px;
          font-size: 0;

          img {
            width: 220px;
            height: 220px;
            margin-left: 40px;
          }
          img:first-child {
            margin: 0;
          }
        }

        .centerPath-bottom {
          margin-top: 60px;
          font-size: 26px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
          text-align: center;
        }
      }

      .phoneBottom {
        margin-top: 80px;
        padding: 0 30px;

        .phoneBottomTitle {
          font-size: 40px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #ffffff;
        }

        .relevantBox {
          margin-top: 30px;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;

          .phoneItem {
            display: block;
            border-radius: 5px;
            padding: 0;
            width: calc(50% - 10px);
            margin-bottom: 42px;
            background: #2b2c2d;
            box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
            border-radius: 12px;

            .productImages {
              img {
                border-radius: 12px 12px 0px 0px;
                width: 100%;
                height: 332px;
              }
            }

            .productDesc {
              padding: 16px 20px 28px 20px;

              p {
                padding-top: 0;
              }

              .productTitle {
                font-size: 28px;
                margin-bottom: 24px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                min-height: 80px;
                color: #ffffff;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }

              .productNumber {
                display: none;
              }

              .productLimit {
                display: none;
              }

              .buy {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .price {
                  font-size: 28px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                  color: #00ffb0;
                }

                span {
                  font-size: 24px;
                  margin-right: 5px;
                }

                .buyButton {
                  display: none;
                }

                .phoneProductNumber {
                  display: block;
                  font-size: 20px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #808080;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
